<template>
  <a-form-item :key="item.field" :label="item.title" :extra="item.extra"
         :name="item.field" :rules="item.rules">
    <a-input v-if="item.type=='text'" v-model:value="model[item.field]"
             :disabled="item.disabled" :allowClear="true" @blur="blurHandle"
             @change="(val)=>changeHandle(val.target.value, item)" :placeholder="item.placeholder"/>
    <a-input-number v-else-if="item.type == 'number'" v-model:value="model[item.field]"
          :min="item.min" :max="item.max" :step="item.step" :allowClear="true" :disabled="item.disabled"  style="width: 100%" />
    <a-select v-else-if="item.type=='select'" v-model:value="model[item.field]"
          :defaultValue="item.default" :options="item.data" :allowClear="true"
              @change="(val)=>changeHandle(val, item)" :mode="item.mode" :disabled="item.disabled" />
    <a-slider v-else-if="item.type=='slider'" v-model:value="model[item.field]" :range="item.range" :marks="item.marks"
          @change="(val)=> changeHandle(val, item)" :min="item.min" :max="item.max" :step="item.step"/>
    <a-cascader v-else-if="item.type=='cascade'" v-model:value="model[item.field]" :options="getOptions(item)"
          :placeholder="item.placeholder" @change="(val)=> changeHandle(val, item)" :disabled="item.disabled"
          :loadData="item.loadData" @popupVisibleChange="popupVisibleChange"/>
    <a-auto-complete v-else-if="item.type=='complete'" v-model:value="model[item.field]" :options="getOptions(item)"
                     allowClear @search="(val) => typeSearch(val, item)" :disabled="item.disabled" />
    <a-checkbox-group v-else-if="item.type=='checkbox'" v-model:value="model[item.field]"
          :options="item.data" @change="(val)=>changeHandle(val, item)" :disabled="item.disabled"/>
    <a-tree-select v-else-if="item.type == 'treeSelect'" :placeholder="item.placeholder"
           :allowClear="true" v-model:value="model[item.field]" :disabled="item.disabled"
           :treeData="item.data" showSearch :searchPlaceholder="item.searchPlaceholder"/>
    <ivz-options-form v-else-if="item.type == 'options'" :meta="item" :model="model" />
    <a-radio-group v-else-if="item.type=='radio'" v-model:value="model[item.field]" button-style="solid" :disabled="item.disabled"
           :options="item.radioStyle != 'button' ? item.data : null" @change="(val)=> changeHandle(val.target.value, item)">
      <template v-if="item.radioStyle == 'button'">
        <template v-for="option in item.data" :key="option.label">
          <a-radio-button :value="option.value">
            {{option.label}}
          </a-radio-button>
        </template>
      </template>
    </a-radio-group>
    <OpdFuncItem v-else-if="item.type=='ofi'" :meta="item" :model="model"/>
    <ivz-sig-form v-else-if="item.type == 'sig'" :meta="item" :model="model"/>
    <a-input-group v-else-if="item.type == 'fieldType'" compact>
      <a-select style="width: 57%" :options="item.data" :allowClear="true"
                v-model:value="model[item.field]" @change="(val)=>changeHandle(val, item)"/>
      <a-input style="width: 43%" v-model:value="model[item.lengthField]" :allowClear="true"
               @change="(val)=>changeHandle(val, item)" placeholder="长度"/>
    </a-input-group>
    <IvzFormValidate v-else-if="item.type=='validate'" :meta="item" :model="model" />
    <ivz-perm-form v-else-if="item.type == 'order'" :meta="item" :model="model" />
    <a-textarea v-else-if="item.type=='area'" v-model:value="model[item.field]" :placeholder="item.placeholder"
                @change="(val) => changeHandle(val, item)" :auto-size="{ minRows: 3, maxRows: 6 }" @blur="(val) => blurHandle()"/>
  </a-form-item>
</template>

<script>
import IvzOptionsForm from "@/components/IvzOptionsForm.vue";
import IvzPermForm from "@/components/IvzPermForm.vue";
import IvzSigForm from "@/components/IvzSigForm.vue";
import OpdFuncItem from "@/components/item/OpdFuncItem.vue";
import {MysqlDataType} from "@/components/OptionsMetaData";
import IvzFormValidate from "@/components/IvzFormValidate.vue";
import {ComponentEventType, EventBus, EventType} from "@/event";

export default {
  name: "IvzRightFormItem",
  props: ['item', 'model'],
  components: {IvzFormValidate, OpdFuncItem, IvzSigForm, IvzPermForm, IvzOptionsForm},
  methods: {
    blurHandle() {
      if(typeof this.item.blur == 'function') {
        let val = this.model[this.item.field];
        this.item.blur(val, this.item, this.model);
      }
    },
    getOptions(meta) {
      if(meta.data) {
        return meta.data;
      } else if(meta.store) {
        let state = this.$store.state.store[meta.store];
        if(!state) {
          console.warn(`store不存在对象[${meta.store}]`)
        }

        return state;
      }
      return [];
    },
    changeHandle(val, meta) {
      if(val instanceof Event) {
        val = val.target.value;
      }
      if(meta.change) {
        let activeMeta = this.$store.getters.activeMeta;
        meta.change(val, activeMeta, this.model);
      }
    },
    popupVisibleChange() {
      let activeMeta = this.$store.getters.activeMeta;
      EventBus.publish(ComponentEventType.cascadeVisibleChange, activeMeta)
    },
    typeSearch(value, meta) {
      if(!meta.options) {
        meta.options = meta.data;
      }

      meta.data = value ? meta.options.filter(item => item.value.includes(value)) : meta.options;
    }
  }
}
</script>

<style scoped>

</style>
